import { Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import { useEffect, useState } from "react";
import { apiChannelTagTree } from "~/api";
import { useTableHeight } from "~/hooks/useTableHeight";
import type { IChannel, IChannelTag } from "~/types/manage/channel/list";

interface Props {
  channel: IChannel | null;
}

export default function ChannelTags(props: Props) {
  const tableHeight = useTableHeight(223);

  const [channelTagList, setChannelTagList] = useState<IChannelTag[]>([]);

  const _fetch = {
    channelTags: async (channelId: number) => {
      const resp = await apiChannelTagTree(channelId);
      setChannelTagList(resp);
    },
  };

  const _ui: {
    tableColumns: ColumnsType<IChannelTag>;
  } = {
    tableColumns: [
      {
        title: "渠道标签ID",
        dataIndex: ["data", "tagId"],
        width: 300,
      },
      {
        title: "渠道标签名称",
        dataIndex: ["data", "tagName"],
      },
    ],
  };

  useEffect(() => {
    if (!props.channel) {
      return;
    }
    _fetch.channelTags(props.channel.id);
  }, [props.channel]);

  return (
    <div>
      <Table
        scroll={{
          y: tableHeight,
          x: "max-content",
        }}
        rowKey={(item) => item.data.tagId}
        columns={_ui.tableColumns}
        dataSource={channelTagList}
        pagination={false}
      />
    </div>
  );
}
